<template>
  <div>
    <PageHeader :breadcrumbList="breadcrumbList">
    </PageHeader>
    <div class="layout-content">
      <Card :bordered="false" dis-hover style="margin-bottom:24px;">
        <Result type="error" :title="failText" :description="failDescription">
          <div slot="extra">
            <div class="project-container">
              <div class="project-name">{{text1}}</div>
              <div class="error-text" v-for="item in errorArr">
                <i class="el-icon-circle-close-outline" style="color: rgb(245, 34, 45); margin-right: 8px; font-size: 18px"></i> {{item.description}}
                <a style="margin-left: 18px">{{item.action}}
                  <Icon type="chevron-right"></Icon>
                </a>
              </div>
            </div>
          </div>
          <div slot="actions">
            <Button type="primary" size="large">返回修改</Button>
          </div>
        </Result>
      </Card>
    </div>
  </div>
</template>

<script>
import { PageHeader, Result } from '@/components'
export default {
  components: { PageHeader, Result },
  data() {
    return {
      breadcrumbList: [
        {
          title: this.$t('home'),
          href: '/'
        },
        {
          title: this.$t('menu.form.title')
        },
        {
          title: this.$t('menu.form.submenu.formBasic')
        }
      ],
      failText: '提交失败',
      failDescription: '请核对并修改以下信息后，再重新提交。',
      text1: '您提交的内容有如下错误：',
      errorArr: [
        { description: '您的账户已被冻结', action: '立即解冻' },
        { description: '您的账户还不具备申请资格立即升级', action: '立即升级' }
      ]
    }
  },

  methods: {}
}
</script>
<style scoped>
.project-name {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  margin-bottom: 16px;
}
.error-text {
  margin-bottom: 16px;
}
</style>
